<!doctype html>

<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <title>SweetAlert</title>
    <meta name="description" content="A beautiful replacement for JavaScript&apos;s &apos;alert&apos;">

    <link rel="stylesheet" href="/assets/css/app.css">

    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,700i" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
    <script src="/assets/sweetalert/sweetalert.min.js"></script>
  </head>

  <body>

    <header class="global-header">
      <div class="page-container">

        <a href="/" class="logo">
        </a>

        <nav>
          <ul>
            <li>
              <a href="/guides">Guides</a>
            </li>

            <li>
              <a href="/docs">Docs</a>
            </li>

            <li>
              <a href="https://www.paypal.me/edwards" target="_blank">Donate</a>
            </li>

            <li>
              <a href="https://github.com/t4t5/sweetalert" class="github-icon"></a>
            </li>
          </ul>
        </nav>

      </div>
    </header>

    <!--
layout: default
-->

<div class="page-container doc-container">

  <nav class="side-menu">
    <h6 class="title">
      Docs
    </h6>

    <a href="#configuration">
      Configuration
    </a>

    <a href="#methods">
      Methods
    </a>

    <a href="#theming">
      Theming
    </a>

  </nav>

  <div class="page-content api">
    <!--
layout: docs
-->
<h1 id="configuration" class="deep-link"><a href="#configuration">Configuration</a></h1>
<ul>
<li>
<h3 id="text" class="deep-link"><a href="#text"><code>text</code></a></h3>
<p><strong>Type:</strong> <code>string</code></p>
<p><strong>Default:</strong> <code>&quot;&quot;</code> (<em>empty string</em>)</p>
<p><strong>Description:</strong></p>
<p>The modal&apos;s text. It can either be added as a configuration under the key <code>text</code> (as in the example below), or passed as the first and only parameter (e.g. <code>swal(&quot;Hello world!&quot;)</code>), or the second one if you have multiple string parameters (e.g. <code>swal(&quot;A title&quot;, &quot;Hello world!&quot;)</code>).</p>
<p><strong>Example:</strong></p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;text</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Hello&#xA0;world!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
</li>
</ul>
<ul>
<li>
<h3 id="title" class="deep-link"><a href="#title"><code>title</code></a></h3>
<p><strong>Type:</strong> <code>string</code></p>
<p><strong>Default:</strong> <code>&quot;&quot;</code> (<em>empty string</em>)</p>
<p><strong>Description:</strong></p>
<p>The title of the modal. It can either be added as a configuration under the key <code>title</code> (as in the example below), or passed as the first string parameter &#x2013; as long as it&apos;s not the only one &#x2013; of the <code>swal</code> function (e.g. <code>swal(&quot;Here&apos;s a title!&quot;, &quot;Here&apos;s some text&quot;)</code>).</p>
<p><strong>Example:</strong></p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;title</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Here&apos;s&#xA0;a&#xA0;title!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
</li>
</ul>
<ul>
<li>
<h3 id="icon" class="deep-link"><a href="#icon"><code>icon</code></a></h3>
<p><strong>Type:</strong> <code>string</code></p>
<p><strong>Default:</strong> <code>&quot;&quot;</code> (<em>empty string</em>)</p>
<p><strong>Description:</strong></p>
<p>An icon for the modal. SweetAlert comes with 4 built-in icons that you can use:</p>
<ul>
<li><code>&quot;warning&quot;</code></li>
<li><code>&quot;error&quot;</code></li>
<li><code>&quot;success&quot;</code></li>
<li><code>&quot;info&quot;</code></li>
</ul>
<p>It can either be added as a configuration under the key <code>icon</code>, or passed as the third string parameter of the <code>swal</code> function (e.g. <code>swal(&quot;Title&quot;, &quot;Text&quot;, &quot;success&quot;)</code>).</p>
<p><strong>Example:</strong></p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;icon</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>success</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
</li>
</ul>
<ul>
<li>
<h3 id="button" class="deep-link"><a href="#button"><code>button</code></a></h3>
<p><strong>Type:</strong> <code>string|boolean|ButtonOptions</code></p>
<p><strong>Default:</strong></p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta brace curly js"><span>{</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;text</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>OK</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;value</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="constant language boolean true js"><span>true</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;visible</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="constant language boolean true js"><span>true</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;className</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;closeModal</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="constant language boolean true js"><span>true</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></div><div class="line"><span class="source js"><span class="meta brace curly js"><span>}</span></span></span></div></pre></div>
<p><strong>Description:</strong></p>
<p>The confirm button that&apos;s shown by default. You can change its text by setting <code>button</code> to a string, or you can tweak more setting by passing a <code>ButtonOptions</code> object. Setting it to <code>false</code> hides the button.</p>
<p><strong>Examples:</strong></p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;button</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Coolio</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;button</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;text</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Hey&#xA0;ho!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="meta brace curly js"><span>}</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Hello&#xA0;world!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;button</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="constant language boolean false js"><span>false</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
</li>
</ul>
<ul>
<li>
<h3 id="buttons" class="deep-link"><a href="#buttons"><code>buttons</code></a></h3>
<p><strong>Type:</strong> <code>boolean|string[]|ButtonOptions[]|ButtonList</code></p>
<p><strong>Default:</strong></p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta brace curly js"><span>{</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;cancel</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;&#xA0;&#xA0;text</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Cancel</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;&#xA0;&#xA0;value</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="constant language null js"><span>null</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;&#xA0;&#xA0;visible</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="constant language boolean false js"><span>false</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;&#xA0;&#xA0;className</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;&#xA0;&#xA0;closeModal</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="constant language boolean true js"><span>true</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;</span><span class="meta brace curly js"><span>}</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;confirm</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;&#xA0;&#xA0;text</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>OK</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;&#xA0;&#xA0;value</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="constant language boolean true js"><span>true</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;&#xA0;&#xA0;visible</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="constant language boolean true js"><span>true</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;&#xA0;&#xA0;className</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;&#xA0;&#xA0;closeModal</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="constant language boolean true js"><span>true</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;</span><span class="meta brace curly js"><span>}</span></span></span></div><div class="line"><span class="source js"><span class="meta brace curly js"><span>}</span></span></span></div></pre></div>
<p><strong>Description:</strong></p>
<p>Specify the exact amount of buttons and their behaviour. If you use an array, you can set the elements as strings (to set only the text), a list of <code>ButtonOptions</code>, or a combination of both. You can also set one of the elements to <code>true</code> to simply get the default options.</p>
<p>If you want more than just the predefined cancel and confirm buttons, you need to specify a <code>ButtonList</code> object, with keys (the button&apos;s namespace) pointing to <code>ButtonOptions</code>.</p>
<p>You can also specify <code>false</code> to hide all buttons (same behaviour as the <code>button</code> option).</p>
<p><strong>Examples:</strong></p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;buttons</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="meta brace square js"><span>[</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Stop</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Do&#xA0;it!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta brace square js"><span>]</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;buttons</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="meta brace square js"><span>[</span></span><span class="constant language boolean true js"><span>true</span></span><span class="meta delimiter object comma js"><span>,</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Do&#xA0;it!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta brace square js"><span>]</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Hello&#xA0;world!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;buttons</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="constant language boolean false js"><span>false</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;buttons</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;cancel</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="constant language boolean true js"><span>true</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;confirm</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="constant language boolean true js"><span>true</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="meta brace curly js"><span>}</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;buttons</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;cancel</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="constant language boolean true js"><span>true</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;confirm</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Confirm</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;roll</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;text</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Do&#xA0;a&#xA0;barrell&#xA0;roll!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;value</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>roll</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="meta brace curly js"><span>}</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="meta brace curly js"><span>}</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
</li>
</ul>
<ul>
<li>
<h3 id="content" class="deep-link"><a href="#content"><code>content</code></a></h3>
<p><strong>Type:</strong> <code>Node|string</code></p>
<p><strong>Default:</strong> <code>null</code></p>
<p><strong>Description:</strong></p>
<p>For custom content, beyond just text and icons.</p>
<p><strong>Examples:</strong></p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;content</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>input</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;content</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;element</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>input</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;attributes</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;placeholder</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Type&#xA0;your&#xA0;password</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;type</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>password</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="meta brace curly js"><span>}</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="meta brace curly js"><span>}</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="storage type var js"><span>var</span></span><span>&#xA0;slider&#xA0;</span><span class="keyword operator assignment js"><span>=</span></span><span>&#xA0;</span><span class="support class js"><span>document</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="support function dom js"><span>createElement</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>input</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span class="variable other object js"><span>slider</span></span><span class="meta delimiter property period js"><span>.</span></span><span class="support constant dom js"><span>type</span></span><span>&#xA0;</span><span class="keyword operator assignment js"><span>=</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>range</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;</span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;content</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;slider</span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
</li>
</ul>
<ul>
<li>
<h3 id="classname" class="deep-link"><a href="#classname"><code>className</code></a></h3>
<p><strong>Type:</strong> <code>string</code></p>
<p><strong>Default</strong>: <code>&quot;&quot;</code> (<em>empty string</em>)</p>
<p><strong>Description</strong>:</p>
<p>Add a custom class to the SweetAlert modal. This is handy for changing the appearance.</p>
<p><strong>Example</strong>:</p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span>&#xA0;&#xA0;</span><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Hello&#xA0;world!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;className</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>red-bg</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
</li>
<li>
<h3 id="closeonclickoutside" class="deep-link"><a href="#closeonclickoutside"><code>closeOnClickOutside</code></a></h3>
<p><strong>Type:</strong> <code>boolean</code></p>
<p><strong>Default:</strong> <code>true</code></p>
<p><strong>Description:</strong></p>
<p>Decide whether the user should be able to dismiss the modal by clicking outside of it, or not.</p>
<p><strong>Example:</strong></p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;closeOnClickOutside</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="constant language boolean false js"><span>false</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
</li>
<li>
<h3 id="closeonesc" class="deep-link"><a href="#closeonesc"><code>closeOnEsc</code></a></h3>
<p><strong>Type:</strong> <code>boolean</code></p>
<p><strong>Default:</strong> <code>true</code></p>
<p><strong>Description:</strong></p>
<p>Decide whether the user should be able to dismiss the modal by hitting the <kbd>ESC</kbd> key, or not.</p>
<p><strong>Example:</strong></p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;closeOnEsc</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="constant language boolean false js"><span>false</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
</li>
</ul>
<ul>
<li>
<h3 id="dangermode" class="deep-link"><a href="#dangermode"><code>dangerMode</code></a></h3>
<p><strong>Type:</strong> <code>boolean</code></p>
<p><strong>Default:</strong> <code>false</code></p>
<p><strong>Description:</strong></p>
<p>If set to <code>true</code>, the confirm button turns red and the default focus is set on the cancel button instead. This is handy when showing warning modals where the confirm action is dangerous (e.g. deleting an item).</p>
<p><strong>Example:</strong></p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Are&#xA0;you&#xA0;sure?</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;dangerMode</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="constant language boolean true js"><span>true</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;buttons</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="constant language boolean true js"><span>true</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
</li>
</ul>
<ul>
<li>
<h3 id="timer" class="deep-link"><a href="#timer"><code>timer</code></a></h3>
<p><strong>Type:</strong> <code>number</code></p>
<p><strong>Default:</strong> <code>null</code></p>
<p><strong>Description:</strong></p>
<p>Closes the modal after a certain amount of time (specified in ms). Useful to combine with <code>buttons: false</code>.</p>
<p><strong>Example:</strong></p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>This&#xA0;modal&#xA0;will&#xA0;disappear&#xA0;soon!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;buttons</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="constant language boolean false js"><span>false</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;timer</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="constant numeric decimal js"><span>3000</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
</li>
</ul>
<h1 id="methods" class="deep-link"><a href="#methods">Methods</a></h1>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>close</code></td>
<td>Closes the currently open SweetAlert, as if you pressed the cancel button.</td>
<td><code>swal.close()</code></td>
</tr>
<tr>
<td><code>getState</code></td>
<td>Get the state of the current SweetAlert modal.</td>
<td><code>swal.getState()</code></td>
</tr>
<tr>
<td><code>setActionValue</code></td>
<td>Change the promised value of one of the modal&apos;s buttons. You can either pass in just a string (by default it changes the value of the confirm button), or an object.</td>
<td><code>swal.setActionValue({ confirm: &apos;Text from input&apos; })</code></td>
</tr>
<tr>
<td><code>stopLoading</code></td>
<td>Removes all loading states on the modal&apos;s buttons. Use it in combination with the button option <code>closeModal: false</code>.</td>
<td><code>swal.stopLoading()</code></td>
</tr>
</tbody>
</table>
<h1 id="theming" class="deep-link"><a href="#theming">Theming</a></h1>
<ul>
<li>
<h3 id="swal-overlay" class="deep-link"><a href="#swal-overlay"><code>swal-overlay</code></a></h3>
<p><strong>Example:</strong></p>
<div class="highlight css"><pre class="editor editor-colors"><div class="line"><span class="source css"><span class="meta selector css"><span class="entity other attribute-name class css"><span class="punctuation definition entity css"><span>.</span></span><span>swal-overlay</span></span><span>&#xA0;</span></span><span class="meta property-list css"><span class="punctuation section property-list begin css"><span>{</span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span>&#xA0;&#xA0;</span><span class="meta property-name css"><span class="support type property-name css"><span>background-color</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span>&#xA0;</span><span class="support function misc css"><span>rgba</span></span><span class="punctuation section function css"><span>(</span></span><span class="constant other color rgb-value css"><span>43,&#xA0;165,&#xA0;137,&#xA0;0.45</span></span><span class="punctuation section function css"><span>)</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span class="punctuation section property-list end css"><span>}</span></span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
</li>
<li>
<h3 id="swal-modal" class="deep-link"><a href="#swal-modal"><code>swal-modal</code></a></h3>
<p><strong>Example:</strong></p>
<div class="highlight css"><pre class="editor editor-colors"><div class="line"><span class="source css"><span class="meta selector css"><span class="entity other attribute-name class css"><span class="punctuation definition entity css"><span>.</span></span><span>swal-modal</span></span><span>&#xA0;</span></span><span class="meta property-list css"><span class="punctuation section property-list begin css"><span>{</span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span>&#xA0;&#xA0;</span><span class="meta property-name css"><span class="support type property-name css"><span>background-color</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span>&#xA0;</span><span class="support function misc css"><span>rgba</span></span><span class="punctuation section function css"><span>(</span></span><span class="constant other color rgb-value css"><span>63,255,106,0.69</span></span><span class="punctuation section function css"><span>)</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span>&#xA0;&#xA0;</span><span class="meta property-name css"><span class="support type property-name css"><span>border</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span>&#xA0;</span><span class="constant numeric css"><span>3</span><span class="keyword other unit css"><span>px</span></span></span><span>&#xA0;</span><span class="support constant property-value css"><span>solid</span></span><span>&#xA0;</span><span class="support constant color w3c-standard-color-name css"><span>white</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span class="punctuation section property-list end css"><span>}</span></span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
</li>
<li>
<h3 id="swal-title" class="deep-link"><a href="#swal-title"><code>swal-title</code></a></h3>
<p><strong>Example:</strong></p>
<div class="highlight css"><pre class="editor editor-colors"><div class="line"><span class="source css"><span class="meta selector css"><span class="entity other attribute-name class css"><span class="punctuation definition entity css"><span>.</span></span><span>swal-title</span></span><span>&#xA0;</span></span><span class="meta property-list css"><span class="punctuation section property-list begin css"><span>{</span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span>&#xA0;&#xA0;</span><span class="meta property-name css"><span class="support type property-name css"><span>margin</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span>&#xA0;</span><span class="constant numeric css"><span>0</span><span class="keyword other unit css"><span>px</span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span>&#xA0;&#xA0;</span><span class="meta property-name css"><span class="support type property-name css"><span>font-size</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span>&#xA0;</span><span class="constant numeric css"><span>16</span><span class="keyword other unit css"><span>px</span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span>&#xA0;&#xA0;</span><span class="meta property-name css"><span class="support type property-name css"><span>box-shadow</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span>&#xA0;</span><span class="constant numeric css"><span>0</span><span class="keyword other unit css"><span>px</span></span></span><span>&#xA0;</span><span class="constant numeric css"><span>1</span><span class="keyword other unit css"><span>px</span></span></span><span>&#xA0;</span><span class="constant numeric css"><span>1</span><span class="keyword other unit css"><span>px</span></span></span><span>&#xA0;</span><span class="support function misc css"><span>rgba</span></span><span class="punctuation section function css"><span>(</span></span><span class="constant other color rgb-value css"><span>0,&#xA0;0,&#xA0;0,&#xA0;0.21</span></span><span class="punctuation section function css"><span>)</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span>&#xA0;&#xA0;</span><span class="meta property-name css"><span class="support type property-name css"><span>margin-bottom</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span>&#xA0;</span><span class="constant numeric css"><span>28</span><span class="keyword other unit css"><span>px</span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span class="punctuation section property-list end css"><span>}</span></span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
</li>
<li>
<h3 id="swal-text" class="deep-link"><a href="#swal-text"><code>swal-text</code></a></h3>
<p><strong>Example:</strong></p>
<div class="highlight css"><pre class="editor editor-colors"><div class="line"><span class="source css"><span class="meta selector css"><span class="entity other attribute-name class css"><span class="punctuation definition entity css"><span>.</span></span><span>swal-text</span></span><span>&#xA0;</span></span><span class="meta property-list css"><span class="punctuation section property-list begin css"><span>{</span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span>&#xA0;&#xA0;</span><span class="meta property-name css"><span class="support type property-name css"><span>background-color</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span>&#xA0;</span><span class="constant other color rgb-value css"><span class="punctuation definition constant css"><span>#</span></span><span>FEFAE3</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span>&#xA0;&#xA0;</span><span class="meta property-name css"><span class="support type property-name css"><span>padding</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span>&#xA0;</span><span class="constant numeric css"><span>17</span><span class="keyword other unit css"><span>px</span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span>&#xA0;&#xA0;</span><span class="meta property-name css"><span class="support type property-name css"><span>border</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span>&#xA0;</span><span class="constant numeric css"><span>1</span><span class="keyword other unit css"><span>px</span></span></span><span>&#xA0;</span><span class="support constant property-value css"><span>solid</span></span><span>&#xA0;</span><span class="constant other color rgb-value css"><span class="punctuation definition constant css"><span>#</span></span><span>F0E1A1</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span>&#xA0;&#xA0;</span><span class="meta property-name css"><span class="support type property-name css"><span>display</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span>&#xA0;</span><span class="support constant property-value css"><span>block</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span>&#xA0;&#xA0;</span><span class="meta property-name css"><span class="support type property-name css"><span>margin</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span>&#xA0;</span><span class="constant numeric css"><span>22</span><span class="keyword other unit css"><span>px</span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span>&#xA0;&#xA0;</span><span class="meta property-name css"><span class="support type property-name css"><span>text-align</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span>&#xA0;</span><span class="support constant property-value css"><span>center</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span>&#xA0;&#xA0;</span><span class="meta property-name css"><span class="support type property-name css"><span>color</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span>&#xA0;</span><span class="constant other color rgb-value css"><span class="punctuation definition constant css"><span>#</span></span><span>61534e</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span class="punctuation section property-list end css"><span>}</span></span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
</li>
<li>
<h3 id="swal-footer" class="deep-link"><a href="#swal-footer"><code>swal-footer</code></a></h3>
<p><strong>Example:</strong></p>
<div class="highlight css"><pre class="editor editor-colors"><div class="line"><span class="source css"><span class="meta selector css"><span class="entity other attribute-name class css"><span class="punctuation definition entity css"><span>.</span></span><span>swal-footer</span></span><span>&#xA0;</span></span><span class="meta property-list css"><span class="punctuation section property-list begin css"><span>{</span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span>&#xA0;&#xA0;</span><span class="meta property-name css"><span class="support type property-name css"><span>background-color</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span>&#xA0;</span><span class="support function misc css"><span>rgb</span></span><span class="punctuation section function css"><span>(</span></span><span class="constant other color rgb-value css"><span>245,&#xA0;248,&#xA0;250</span></span><span class="punctuation section function css"><span>)</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span>&#xA0;&#xA0;</span><span class="meta property-name css"><span class="support type property-name css"><span>margin-top</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span>&#xA0;</span><span class="constant numeric css"><span>32</span><span class="keyword other unit css"><span>px</span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span>&#xA0;&#xA0;</span><span class="meta property-name css"><span class="support type property-name css"><span>border-top</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span>&#xA0;</span><span class="constant numeric css"><span>1</span><span class="keyword other unit css"><span>px</span></span></span><span>&#xA0;</span><span class="support constant property-value css"><span>solid</span></span><span>&#xA0;</span><span class="constant other color rgb-value css"><span class="punctuation definition constant css"><span>#</span></span><span>E9EEF1</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span>&#xA0;&#xA0;</span><span class="meta property-name css"><span class="support type property-name css"><span>overflow</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span>&#xA0;</span><span class="support constant property-value css"><span>hidden</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span class="punctuation section property-list end css"><span>}</span></span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
</li>
<li>
<h3 id="swal-button" class="deep-link"><a href="#swal-button"><code>swal-button</code></a></h3>
<p><strong>Description:</strong></p>
<p>The modal&apos;s button(s). It has an extra class that changes depending on the button&apos;s type, in the format <code>swal-button--{type}</code>. The extra class for the confirm button for example is <code>swal-button--confirm</code>.</p>
<p><strong>Example:</strong></p>
<div class="highlight css"><pre class="editor editor-colors"><div class="line"><span class="source css"><span class="meta selector css"><span class="entity other attribute-name class css"><span class="punctuation definition entity css"><span>.</span></span><span>swal-button</span></span><span>&#xA0;</span></span><span class="meta property-list css"><span class="punctuation section property-list begin css"><span>{</span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span>&#xA0;&#xA0;</span><span class="meta property-name css"><span class="support type property-name css"><span>padding</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span>&#xA0;</span><span class="constant numeric css"><span>7</span><span class="keyword other unit css"><span>px</span></span></span><span>&#xA0;</span><span class="constant numeric css"><span>19</span><span class="keyword other unit css"><span>px</span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span>&#xA0;&#xA0;</span><span class="meta property-name css"><span class="support type property-name css"><span>border-radius</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span>&#xA0;</span><span class="constant numeric css"><span>2</span><span class="keyword other unit css"><span>px</span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span>&#xA0;&#xA0;</span><span class="meta property-name css"><span class="support type property-name css"><span>background-color</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span>&#xA0;</span><span class="constant other color rgb-value css"><span class="punctuation definition constant css"><span>#</span></span><span>4962B3</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span>&#xA0;&#xA0;</span><span class="meta property-name css"><span class="support type property-name css"><span>font-size</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span>&#xA0;</span><span class="constant numeric css"><span>12</span><span class="keyword other unit css"><span>px</span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span>&#xA0;&#xA0;</span><span class="meta property-name css"><span class="support type property-name css"><span>border</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span>&#xA0;</span><span class="constant numeric css"><span>1</span><span class="keyword other unit css"><span>px</span></span></span><span>&#xA0;</span><span class="support constant property-value css"><span>solid</span></span><span>&#xA0;</span><span class="constant other color rgb-value css"><span class="punctuation definition constant css"><span>#</span></span><span>3e549a</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span>&#xA0;&#xA0;</span><span class="meta property-name css"><span class="support type property-name css"><span>text-shadow</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span>&#xA0;</span><span class="constant numeric css"><span>0</span><span class="keyword other unit css"><span>px</span></span></span><span>&#xA0;</span><span class="constant numeric css"><span>-1</span><span class="keyword other unit css"><span>px</span></span></span><span>&#xA0;</span><span class="constant numeric css"><span>0</span><span class="keyword other unit css"><span>px</span></span></span><span>&#xA0;</span><span class="support function misc css"><span>rgba</span></span><span class="punctuation section function css"><span>(</span></span><span class="constant other color rgb-value css"><span>0,&#xA0;0,&#xA0;0,&#xA0;0.3</span></span><span class="punctuation section function css"><span>)</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span class="punctuation section property-list end css"><span>}</span></span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
</li>
</ul>

  </div>

</div>


    <div id="app"></div>

    <footer>
      <p>
        Hand-crafted with <span class="love-icon"></span> by
        <a href="http://tristanedwards.me">
          Tristan Edwards
        </a>
        + 
        <a href="https://github.com/t4t5/sweetalert/graphs/contributors">
          contributors
        </a>
      </p>
    </footer>

    <script src="/assets/js/index.js"></script>
  </body>

</html>
